<template>
  <section class="component-box">
    <div class="user-box">
      <figure class="video" ref="remoteVideoDiv" />
      <div class="info-box">
        <p class="user-id">{{ remoteUser.t_admin_pk }}</p>
        <el-icon>
          <Mute
            class="icon"
            v-if="remoteUser.disableAudio"
            @click="setRemoteAudio(remoteUser.t_admin_pk, true)"
          />
          <Microphone
            class="icon"
            v-else
            @click="setRemoteAudio(remoteUser.t_admin_pk, false)"
          />
        </el-icon>
      </div>
    </div>
    <div class="btns">
      <el-button type="danger" circle title="挂断电话">
        <router-link :to="{ name: 'talk' }">
          <el-icon><PhoneFilled /></el-icon>
        </router-link>
      </el-button>
    </div>
    <div class="user-box">
      <figure class="video" ref="localVideoDiv" />
      <div class="info-box">
        <div class="user-id">我</div>
      </div>
    </div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { PhoneFilled, Microphone, Mute } from "@element-plus/icons-vue";

defineProps({
  remoteUser: {
    type: Object,
    required: true,
  },
  localUser: {
    type: Object,
    required: true,
  },
});

const localVideoDiv = ref();
const remoteVideoDiv = ref();

const emits = defineEmits(["setRemoteAudio"]);

const setRemoteAudio = (t_admin_pk: number, bool: boolean) => {
  emits("setRemoteAudio", { t_admin_pk, bool });
};

defineExpose({
    localVideoDiv,
    remoteVideoDiv
})
</script>
<style lang="scss" scoped>
.component-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .user-box {
    width: 40%;
    border: 1px solid var(--el-border-color-light);
    flex-grow: 1;
    .video {
        height: 500px;
    }

    .info-box {
        line-height: 20px;
        font-size: 18px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid var(--el-border-color-light);
    }
  }

  .btns {
    flex-shrink: 0;
    padding: 20px;
  }
}
</style>